import React, { useState } from 'react';

const ClipModule = () => {
  const [clipItems, setClipItems] = useState([
    { id: 1, content: '拇指精灵是一款手机辅助工具', timestamp: '10:23:15' },
    { id: 2, content: 'https://www.example.com/muzhi-sprite', timestamp: '10:22:05' },
    { id: 3, content: '联系方式：contact@example.com', timestamp: '10:19:32' },
    { id: 4, content: '如何设置自动点击功能？', timestamp: '09:58:44' }
  ]);

  return (
    <div className="clip-module">
      <h3>剪切板</h3>
      <div className="clip-board" style={{
        height: '300px',
        overflow: 'auto',
        backgroundColor: '#222',
        padding: '10px',
        borderRadius: '5px'
      }}>
        {clipItems.map(item => (
          <div key={item.id} className="clip-item" style={{
            backgroundColor: '#333',
            padding: '8px',
            marginBottom: '8px',
            borderRadius: '4px',
            position: 'relative'
          }}>
            <div style={{ color: '#fff', marginBottom: '5px', wordBreak: 'break-all' }}>
              {item.content}
            </div>
            <div style={{ 
              color: '#aaa', 
              fontSize: '11px', 
              display: 'flex', 
              justifyContent: 'space-between' 
            }}>
              <span>{item.timestamp}</span>
              <button style={smallButtonStyle}>复制</button>
            </div>
          </div>
        ))}
      </div>
      <div className="clip-controls" style={{ marginTop: '10px' }}>
        <button style={buttonStyle}>刷新</button>
        <button style={buttonStyle}>复制到设备</button>
        <button style={buttonStyle}>从设备获取</button>
      </div>
    </div>
  );
};

const buttonStyle = {
  backgroundColor: '#2a2a2a',
  color: 'white',
  border: 'none',
  padding: '5px 10px',
  margin: '0 5px',
  borderRadius: '4px',
  cursor: 'pointer'
};

const smallButtonStyle = {
  backgroundColor: '#444',
  color: '#ccc',
  border: 'none',
  padding: '2px 6px',
  fontSize: '11px',
  borderRadius: '3px',
  cursor: 'pointer'
};

export default ClipModule; 